<div class="nv-dialog">
  <div class="d-flex justify-content-between align-items-center">
    <h4 mat-dialog-title class="mb-2">
      <span>{{'policy.TIP.MOVE' | translate}}</span>
    </h4>
    <button
      (click)="onCancel()"
      class="mb-2"
      aria-label="Close dialog"
      mat-icon-button>
      <i class="eos-icons">close</i>
    </button>
  </div>
  <hr class="fancy mb-3" />
  <div mat-dialog-content>
    <form class="margin-top-s">
      <mat-radio-group
        aria-label="Rule moving position"
        [(ngModel)]="movingPosition"
        [ngModelOptions]="{standalone: true}"
        class="margin-right-xl"
      >
        <mat-radio-button [value]="updateType.MoveUp" class="margin-right-m">{{'policy.toolBar.BEFORE_ROWS' | translate}}</mat-radio-button>
        <mat-radio-button [value]="updateType.MoveDown">{{'policy.toolBar.AFTER_ROWS' | translate}}</mat-radio-button>
      </mat-radio-group>
      <mat-form-field class="example-full-width" appearance="standard">
        <mat-label>ID</mat-label>
        <input
          type="number"
          matInput
          [formControl]="idFormCtrl"
        >
        <mat-error *ngIf="idFormCtrl.hasError('number') && !idFormCtrl.hasError('required')">
          {{'policy.toolBar.ID_VAL_ERR' | translate}}
        </mat-error>
        <mat-error *ngIf="idFormCtrl.hasError('required')">
          {{'policy.toolBar.ID_EMPTY_ERR' | translate}}
        </mat-error>
      </mat-form-field>
      <div class="d-flex justify-content-end align-items-center">
        <button mat-stroked-button
                aria-label="cancel"
                class="mr-2" (click)="onCancel()">
          {{ "policy.addPolicy.CANCEL" | translate }}
        </button>
        <app-loading-button
          [appearance]="'mat-raised-button'"
          [color]="'primary'"
          [loading]="submittingUpdate"
          [text]="'policy.toolBar.MOVE' | translate"
          (click)="moveNetworkRules()"
        >
        </app-loading-button>

      </div>
    </form>
  </div>
</div>
